<template>
  <!-- 我的收货单 -->
  <div class="my-receipt">
    <div class="header">
      <h3 class="line">我的收货单</h3>
    </div>

    <div class="footer">
      <el-card style="border-radius: 8px;height:95%">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="全部" name="first">
            <!-- 搜索框 -->
            <Search />
            <div class="btn">
              <el-button @click="open">确认收货单</el-button>
            </div>
            <!-- 表格 -->
            <allTable ref="table" v-if="activeName === 'first'"/>
          </el-tab-pane>
          <el-tab-pane label="待收货" name="second">
            <!-- 搜索框 -->
            <Search />
            <div class="btn">
              <el-button @click="waitOpen">确认收货单</el-button>
            </div>
            <!-- 表格 -->
            <waitTable ref="waitTable" v-if="activeName === 'second'"/>
          </el-tab-pane>
          <el-tab-pane label="部分收货" name="third">
            <!-- 搜索框 -->
            <Search />
            <div class="btn">
              <el-button @click="someOpen">确认收货单</el-button>
            </div>
            <!-- 表格 -->
            <someTable ref="someTable" v-if="activeName === 'third'"/>
          </el-tab-pane>
          <el-tab-pane label="已收货" name="fourth">
            <!-- 搜索框 -->
            <Search />
            <!-- 表格 -->
            <alreadyTable v-if="activeName === 'fourth'"/>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </div>
  </div>
</template>

<script>
import Search from "./components/listSearch.vue";
import allTable from "./components/allTable.vue";
import waitTable from "./components/waitTable.vue"
import someTable from "./components/someTable.vue"
import alreadyTable from "./components/alreadyTable.vue"
export default {
  name: "myReceipt",
  data() {
    return {
      activeName: "first",
      tabLabel: ''
    };
  },
  components: {
    Search,
    allTable,
    waitTable,
    someTable,
    alreadyTable
  },
  mounted() { },
  methods: {
    open() {
      this.$confirm('请确认所选订单货物已全部收到', {
        cancelButtonText: '取消',
        confirmButtonText: '确定',
        customClass:'message-box',
        type: 'warning'
      }).then(() => {
        this.$refs.table.updateStatus()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },
    waitOpen() {
      this.$confirm('请确认所选订单货物已全部收到', {
        cancelButtonText: '取消',
        confirmButtonText: '确定',
        customClass:'message-box',
        type: 'warning'
      }).then(() => {
        this.$refs.waitTable.updateStatus()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },
    someOpen() {
      this.$confirm('请确认所选订单货物已全部收到', {
        cancelButtonText: '取消',
        confirmButtonText: '确定',
        customClass:'message-box',
        type: 'warning'
      }).then(() => {
        this.$refs.someTable.updateStatus()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },
    //切换tab
    handleClick(tab, event) {
      console.log('tab,event', tab, event)
      this.tabLabel = tab.label
    },
  },
};
</script>

<style scoped lang="scss">
.my-receipt {
  font-size: 16px;

  .header {
    h3 {
      font-weight: bold;
    }
  }

  .line::before {
    content: " ";
    width: 8px;
    height: 20px;
    background: #0782eb;
    display: inline-block;
    vertical-align: text-bottom;
    margin: 0px 5px;
  }

  .footer {
    margin: 10px;
    height: 100%;

    .btn {
      margin: 22px 0 16px 0;
    }
  }
  // .message-box.el-button:last-child{
  //   background: #004FEE;
  //   color: #FFFFFF;
  // }
}
</style>